
// 轮播图
  var mySwiper = new Swiper ('.swiper', {
    loop : true,    //循环切换
    autoplay:true,  //自动播放
    navigation: {  //按钮切换
      nextEl: ".swiper-button-next",
      prevEl: ".swiper-button-prev",
    },
    pagination :{
        el: '.swiper-pagination',
        clickable :true,
      },
  })        


  //方法一
  //需求：鼠标移入li的时候将图标显示，li的背景色也变成蓝色

  /* 
    获取元素
  */

let apiLi= document.querySelectorAll('.API li')
console.log(apiLi);
let img2=document.querySelectorAll('.api-img2')

apiLi.forEach(function(dom){
  dom.addEventListener('mouseover',function(){
  // this.children[0].children[1]
  console.log(this.children[0].children[1]);
  this.children[0].children[1].style.display='block'
  // this.children[0].children[0].style.display='none'
  this.style.backgroundColor='#005be0'
  })

  dom.addEventListener('mouseout',function(){
    // this.children[0].children[1]
    console.log(this.children[0].children[1]);
    this.children[0].children[1].style.display='none'
    // this.children[0].children[0].style.display='block'
    this.style.backgroundColor='white'
    })
})


//方法2  如果这几个li的图片名字有规律，就可以使用索引

/**
 * 1.需求: 鼠标移入api-list下面的li
 *         1) 改变当前li的背景色: deepskyblue
 *         2) 改变li下面img的src属性值:
 */

/* 
  获取元素
*/

// let apiLi= document.querySelectorAll('.API li')  //获取li

// apiLi.forEach(function(dom,i){                   //li为集合所以要遍历
//   dom.addEventListener('mouseover',function(){
//     this.querySelector('img').src=`../imgs/api0${i+1}-c.svg`   //获取img里面的src  找到src里面图片路径的规律
//     this.style.backgroundColor='#005be0'         //改变背景色

//     //找当前li的孙子img: 以下都可以
//     //console.log(this.querySelector('img'));
//     //console.log(this.children[0].children[0]);
//     //console.log(this.firstElementChild.firstElementChild);
//   })

//     //移入
//     dom.addEventListener('mouseout', function () {
//       this.style.backgroundColor = '#005be0' //当前背景色
//       this.querySelector('img').src = `../imgs/api0${i + 1}.svg`
//     })
// })


// //方法3  如果这几个li的图片名字有规律，就可以使用索引

// let apiLi= document.querySelectorAll('.API li')  
// let fileName=''

//     apiLi.forEach(function(dom){
//       //移入
//       dom.addEventListener('mouseover',function(){
//         let imgSrc=this.querySelector('img').src

//         let src1= imgSrc.lastindexOf('/') //查找src路径里面的最后一个/的索引位置
//         let src2= imgSrc.lastindexOf('.') //查找src路径里面的最后一个.的索引位置

//         //找到之后截取字符串就得到了图片的名字
//         let name=imgSrc.subString(src1+1,src2)

//         this.querySelector('img').src = `../imgs/${fileName}-c.svg` //重新设置图片路径

//     })

//     //移出
//     dom.addEventListener('mouseout', function () {

//       this.style.backgroundColor = '#fff' //当前背景色
//       this.querySelector('img').src = `../imgs/${fileName}.svg`
//     })
//   })
  
/* 
  给助力行业添加激活样式 
  跑马灯思想：每隔几秒 消除上一个激活样式
  给当前添加激活样式  active
*/
let zongImg=document.querySelector('.zong-img')
let zongText=document.querySelectorAll('.zong-text')

//设置一个变量保存上一个拥有激活样式的盒子的索引

let index=0
let time=setInterval(paoMaDeng,1500)

//效果2  
//当我们鼠标移入zongImg的时候循环停止===计时器停止

zongImg.addEventListener('mouseover',function(){
  clearInterval(time)
})

//当我们鼠标移出zongImg的时候循环停止===计时器开启
zongImg.addEventListener('mouseout',function(){
  time=setInterval(paoMaDeng,1500)
})

function paoMaDeng(){   //开启计时器
  //清除第一个的激活样式
  zongText[index].classList.remove('active')

  //下一个div的索引
  ++index

  //判断：我们要循环，不是轮一次就好
  if(index===zongText.length)
    index=0
     //给这个div添加激活样式
       zongText[index].classList.add('active')
}


// 回到顶部
//需求1：当滚动到一定距离就显示图标

let return2=document.querySelector('.return')

window.addEventListener('scroll', function () {
  //获取滚动距离
  let sTop = document.documentElement.scrollTop

  //判断
  if (sTop >= 1200) {
    return2.style.display = 'block';//显示
  } else {
    return2.style.display = 'none';//隐藏
  }
})

// 需求2：鼠标移入图标的时候图标位置改变
return2.addEventListener('mouseover',function(){
  return2.style.backgroundPositionY='-98px'
})
return2.addEventListener('mouseout',function(){
  return2.style.backgroundPositionY='-56px'
})


// 需求3：点击图标缓慢回到顶部
return2.addEventListener('click',function(){
    window.scrollTo({
      top: 0,
      behavior: "smooth"
    }) 
})

